<template>
  <n-grid y-gap="5">
    <n-grid-item span="24">
      <n-card title="人物信息">
        <template #header-extra>
          <n-space justify="end" style="margin-bottom: 5px">
            <n-dropdown placement="bottom-start" @select="characterNameExtract" trigger="click" size="small"
                        :options="nameExtractOption">
              <n-button type="warning" size="small" :loading="nameExtractLoading">人物提取</n-button>
            </n-dropdown>
            <n-button type="primary" size="small" @click="characterModal = true; resetFormData()">新增角色
            </n-button>
          </n-space>
        </template>
        <n-scrollbar :style="{ height: ( (clientHeight - (layoutHeaderHeight  + tabsHeight + 220)) / 2 ) + 'px'}">
          <n-grid :x-gap="2" :y-gap="2" :cols="5">
            <n-grid-item v-for="item in characterList">
              <n-card :title="item.characterName" footer-style="padding: 0px 0px 5px 5px;"
                      header-style="padding: 0px 0px 0px 5px">
                <template #cover>
                  <n-image
                      v-if="item.characterAvatar"
                      preview-disabled
                      :src="fileFunction.getCharacterInfoImage(item.characterAvatar)">
                  </n-image>
                </template>
                <template #footer>
                  <n-space justify="space-between">
                    <n-space>
                      <n-tooltip trigger="hover">
                        <template #trigger>
                          <n-button type="error" size="small" @click="deleteCharacter(item.id)">
                            <template #icon>
                              <n-icon>
                                <RemoveCircleOutline/>
                              </n-icon>
                            </template>
                          </n-button>
                        </template>
                        删除
                      </n-tooltip>
                      <n-tooltip trigger="hover">
                        <template #trigger>
                          <n-button type="warning" size="small" @click="editCharacter(item)">
                            <template #icon>
                              <n-icon>
                                <pencil/>
                              </n-icon>
                            </template>
                          </n-button>
                        </template>
                        修改
                      </n-tooltip>
                    </n-space>

                    <n-space>
                      <n-tooltip trigger="hover">
                        <template #trigger>
                          <n-button type="primary" size="small"
                                    @click="selectedCharacter = item ;characterInfoListShow = true">
                            <template #icon>
                              <n-icon>
                                <EyedropOutline/>
                              </n-icon>
                            </template>
                          </n-button>
                        </template>
                        从人物库选取
                      </n-tooltip>
                    </n-space>
                  </n-space>
                </template>
              </n-card>
            </n-grid-item>
          </n-grid>
        </n-scrollbar>
      </n-card>
    </n-grid-item>

    <n-grid-item span="24">
      <n-card title="场景信息">
        <template #header-extra>
          <n-space justify="end" style="margin-bottom: 5px">
            <!--                  <n-button type="warning" size="small" @click="characterNameExtract" :loading="nameExtractLoading">-->
            <!--                    推理场景-->
            <!--                  </n-button>-->
            <n-button type="primary" size="small" @click="resetFormData();addSceneShow = true;">新增场景
            </n-button>
          </n-space>
        </template>

        <n-table striped>
          <thead>
          <tr>
            <th style="width: 120px">操作</th>
            <th>场景名称</th>
            <th>场景描述</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="scene in sceneList">
            <td>
              <n-button style="width: 50px;" type="warning" size="small" @click="deleteScene(scene.id)">删除
              </n-button>
              <n-button style="width: 50px;margin-left: 5px" type="primary" size="small"
                        @click="editScene(scene)">编辑
              </n-button>
            </td>
            <td>{{ scene.sceneName }}</td>
            <td>{{ scene.sceneDescription }}</td>
          </tr>
          </tbody>
        </n-table>


      </n-card>
    </n-grid-item>
  </n-grid>

</template>

<script setup lang="ts">
import fileFunction from "@/libs/globalFunction/file";
import {EyedropOutline, Pencil, RemoveCircleOutline} from "@vicons/ionicons5";

const props = defineProps({
  schedule: {
    type: Object,
    required: true,
    default: () => {
      return {
        scheduleOperatingFlag: false,
        currentTaskNum: 0,
        taskStatus: {
          successNum: 0,
          failNum: 0,
          totalNum: 0
        }
      }
    }
  }
})
</script>
